<!--
 * @Author: zhangpeng
 * @Date: 2024-11-25 10:55:37
 * @FilePath: \scientific_research_manager_web\src\views\resultsManagement\components\ResultAttachmentModal.vue
 * @LastEditTime: 2024-12-05 17:17:46
 * @Description: 成果 - 附件弹框
-->

<script setup lang="ts">
import type { AttachmentFileInfoDTO } from '@/types/resultsManagement'
interface FileListInterface {
  title: string,
  files?: AttachmentFileInfoDTO[]
}

const props = defineProps({
  title: {
    type: String,
    default: '附件',
  },
  visible: {
    type: Boolean,
    default: false,
  },
  fileList: {
    type: Array as PropType<FileListInterface[]>,
    default: [],

  },
  labelKey: {
    type: String,
    default: 'title', //  文件类别 key  (期刊封面 版权页 目录页)
  },
  filesKey: {
    type: String,
    default: 'files', //  文件列表key
  },
})

const emit = defineEmits(['close'])

</script>

<template>
  <div class="attachment-modal">
    <el-dialog v-model="props.visible" :title="props?.title" width="600" @close="emit('close')"
      :close-on-click-modal="false">
      <div class="attachment">
        <el-scrollbar>
          <div class="px-[20px] pt-[20px]">

            <el-form v-if="props.fileList?.length" label-width="auto">
              <el-form-item :label="item?.[props?.labelKey] || '附件'" v-for="(item, index) in props?.fileList"
                :key="index">
                <template v-for="(file, fileIndex) in item?.[props?.filesKey]" :key="fileIndex">
                  <div class="w-full">
                    <!-- <div class="file-icon-wrap">
                      <div class="icon type-icon"></div>
                    </div>
                    <span class="leading-[22px] text-[#6B6AFF] cursor-pointer">
                      {{ file?.name }}
                    </span>
                    <div class="file-icon-wrap ">
                      <el-icon class="icon down-icon" size="16" color="#6B6AFF">
                        <Download />
                      </el-icon>
                    </div> -->
                    <FilePreviewItem :file="file"></FilePreviewItem>
                  </div>
                </template>

              </el-form-item>
            </el-form>

            <el-empty v-else description="暂无数据" />
          </div>
        </el-scrollbar>


      </div>

    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.dialog-footer {
  --at-apply: text-right;
}

.attachment-modal {
  :deep(.el-dialog__footer) {
    display: none;
  }

  :deep(.el-dialog__body) {
    --at-apply: px-[0] py-[20px];
  }

  :deep(.el-form-item__label) {
    --at-apply: leading-[22px] h-[22px] pr-[34px];
  }

  :deep(.el-form-item__content) {
    --at-apply: leading-[22px] min-h-[22px];
  }
}

.attachment {
  --at-apply: h-[368px];

  :deep(.el-form-item--default) {
    --at-apply: mb-[16px];
  }

  .file-icon-wrap {
    --at-apply: h-[22px] leading-[22px] flex-none;

    .icon {
      --at-apply: inline-block vertical-middle;
    }

    .type-icon {
      --at-apply: bg-red w-[16px] h-[16px] mr-[6px];
    }

    .down-icon {
      --at-apply: ml-[12px] cursor-pointer;
    }
  }
}
</style>